<template>
    <div class="container">
        <ul class="trend-container">
            <li v-for="(item, index) in trends" :key="index" class="trend-item" @click="goToTrend(item.id)">
                <div class="user-avatar" @click.stop="goToUser(item.userId)">
                    <img class="avatar-item" :src="item.avatar" />
                </div>
                <div class="main">
                    <div class="info">
                        <div class="user-info">
                            <a class>{{ item.userName }}</a>
                        </div>
                        <div class="interaction-hint">
                            <span>{{ item.time }}</span>
                        </div>
                        <div class="interaction-content">{{ item.content }}</div>
                        <div class="interaction-imgs" v-if="item.imgs.length">
                            <div v-for="(img, i) in item.imgs" :key="i" class="details-box">
                                <img :src="img" />
                            </div>
                        </div>
                        <div class="interaction-footer">
                            <div class="icon-item">
                                <Star style="width: 1em; height: 1em" />
                                <span class="count">{{ item.likes }}</span>
                            </div>
                            <div class="icon-item">
                                <ChatRound style="width: 1em; height: 1em" />
                                <span class="count">{{ item.comments }}</span>
                            </div>
                            <div class="icon-item">
                                <More style="width: 1em; height: 1em" />
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Star, ChatRound, More } from "@element-plus/icons-vue";

const router = useRouter()

// 添加ID字段的假数据
const trends = ref([
    {
        id: 1,
        userId: 1001,
        avatar: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        userName: '前端开发者',
        time: '3小时前',
        content: '分享最新的设计趋势 #MaterialDesign',
        imgs: [
            'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
        ],
        likes: 89,
        comments: 15
    },
    {
        id: 2,
        userId: 1002,
        avatar: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        userName: 'UI设计师',
        time: '3小时前',
        content: '分享最新的设计趋势 #MaterialDesign',
        imgs: [
            'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
        ],
        likes: 89,
        comments: 15
    },
    {
        id: 3,
        userId: 1003,
        avatar: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        userName: '全栈工程师',
        time: '3小时前',
        content: '分享最新的设计趋势 #MaterialDesign',
        imgs: [
            'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
        ],
        likes: 89,
        comments: 15
    }
])

// 跳转到动态详情页
const goToTrend = (id: number) => {
    router.push({ path: '/main', query: { id } })
}

// 跳转到用户主页
const goToUser = (userId: number) => {
    router.push({ path: '/user', query: { id: userId } })
}
</script>

<style lang="less" scoped>
.container {
    flex: 1;
    padding: 0 24px;
    padding-top: 72px;
    width: 67%;
    margin: 0 auto;

    .trend-container {
        .trend-item {
            display: flex;
            flex-direction: row;
            padding-top: 24px;
            max-width: 100vw;

            .user-avatar {
                margin-right: 24px;
                flex-shrink: 0;

                .avatar-item {
                    width: 48px;
                    height: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    border-radius: 100%;
                    border: 1px solid rgba(0, 0, 0, 0.08);
                    object-fit: cover;
                }
            }

            .main {
                flex-grow: 1;
                flex-shrink: 1;
                display: flex;
                flex-direction: row;
                padding-bottom: 12px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.08);

                .info {
                    flex-grow: 1;
                    flex-shrink: 1;

                    .user-info {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        font-size: 16px;
                        font-weight: 600;
                        margin-bottom: 4px;

                        a {
                            color: #333;
                        }
                    }

                    .interaction-hint {
                        font-size: 14px;
                        color: rgba(51, 51, 51, 0.6);
                        margin-bottom: 8px;
                    }

                    .interaction-content {
                        display: flex;
                        font-size: 14px;
                        color: #333;
                        margin-bottom: 12px;
                        line-height: 140%;
                        cursor: pointer;
                    }

                    .interaction-imgs {
                        display: flex;

                        .details-box {
                            width: 25%;
                            border-radius: 4px;
                            margin: 8px 12px 0 0;
                            cursor: pointer;

                            img {
                                width: 100%;
                                height: 230px;
                                display: flex;
                                border-radius: 4px;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;
                                border: 1px solid rgba(0, 0, 0, 0.08);
                                object-fit: cover;
                            }
                        }
                    }

                    .interaction-footer {
                        margin: 8px 12px 0 0;
                        padding: 0 12px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .icon-item {
                            display: flex;
                            justify-content: left;
                            align-items: center;
                            color: rgba(51, 51, 51, 0.929);

                            .count {
                                margin-left: 3px;
                            }
                        }
                    }
                }
            }
        }
    }
}

.trend-item {
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }
}

.user-avatar {
    cursor: pointer;

    &:hover {
        opacity: 0.8;
    }
}
</style>
